<template>
	<div class="content">
		<div class="clear">
			<Form inline class="fl">
				<Input type="text" placeholder="UUID" class="w200 m-r10" v-model.trim="uuid" />
				<Input type="text" placeholder="用户名" class="w200 m-r10" v-model.trim="userName" />
				<DatePicker type="daterange" split-panels placeholder="请选择时间段" class="w200 m-r10" format="yyyy-MM-dd" @on-change="getTime">
				</DatePicker>
				<Button type="primary" v-on:click="getQuery">查询</Button>
			</Form>
		</div>
		<!-- <Button class="daochu" type="primary" size="large" @click="exportData" :loading="dcShow">
            <Icon type="ios-download-outline"></Icon> 导出</Button> -->
		<Table class="m-t10" stripe :columns="columns" ref="table" :data='list' :loading="loading"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="getQuery" :current.sync="page"></Page>
		<Modal v-model="modal1" title="释放详情" width='55%'>
			<!-- <DatePicker type="daterange" split-panels placeholder="请选择时间段" class="w200 m-r10" format="yyyy-MM-dd" @on-change="getTime2">
			</DatePicker>
			<Button type="primary" v-on:click="getQueryById">查询</Button> -->
			<Table class="m-t10" stripe :columns="columns1" :data='list1' :loading="loading2" ref="table"></Table>
			<!-- <Page :total="info2" show-elevator :page-size="pageSize2" show-total @on-change="getQueryById" :current.sync="page2"></Page> -->
		</Modal>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				dcShow: false,
				loading: true,
				loading2: true,
				jsonData: [],
				list: [], // 分享收益列表数据
				list1: [], // 分享收益列表数据
				num: '', // 累计分享收益
				info: null, // 总条数
				info2: null, // 总条数
				page: 1, // 页数
				page2: 1, // 页数
				pageSize: 10, // 每页多少条
				pageSize2: 10, // 每页多少条
				downList: [],
				dataValue: ['', ''], // 时间段值
				dataValue2: ['', ''], // 时间段值
				uuid: '', // 用户 ID
				userName: '', // 手机号码
				list2: [],
				modal1: false,
				byId: '',
				columns: [{
						title: 'UUID',
						align: 'center',
						key: 'uuid',
						render: (h, params) => {
							return h('div', params.row.uuid == null ? '#' : params.row.uuid)
						}
					},
					{
						title: '用户名',
						align: 'center',
						key: 'userName',
						// render: (h, params) => {
						// 	// return h('div', params.row.username == null ? '#' : params.row.username)
						// }
					},
					{
						title: '账户类型',
						align: 'center',
						key: 'accountName',
						// render: (h, params) => {
						// 	// return h('div', params.row.username == null ? '#' : params.row.username)
						// }
					},
					{
						title: '数量',
						align: 'center',
						key: 'num',
						// render: (h, params) => {
						// 	// return h('div', params.row.storageNumConvertPlatform == null ? '#' : this.Fixed(params.row.storageNumConvertPlatform, 4))
						// }
					},
					{
						title: '已释放数量',
						align: 'center',
						key: 'releaseNum',
						// render: (h, params) => {
						// 	return h('div', params.row.storageWorth == null ? '#' : this.Fixed(params.row.storageWorth, 4))
						// }
					},
					{
						title: '状态',
						align: 'center',
						key: 'statusId',
						render: (h, params) => {
							return h('div', params.row.statusId == null ? '#' : params.row.statusId == 1 ? '已释放完毕' : '进行释放中')
						}
					},
					{
						title: '上次释放时间',
						align: 'center',
						key: 'lastTime',
						render: (h, params) => {
							return h('div', params.row.lastTime == null ? '#' : this.stringToTime(params.row.lastTime))
						}
					},
					{
						title: '下次释放时间',
						align: 'center',
						key: 'nextTime',
						render: (h, params) => {
							return h('div', params.row.nextTime == null ? '#' : this.stringToTime(params.row.nextTime))
						}
					},
					{
						title: '创建时间',
						align: 'center',
						key: 'createTime',
						sortable: true,
						render: (h, params) => {
							return h('div', params.row.createTime == null ? '#' : this.stringToTime(params.row.createTime))
						}
					},
					{
						title: '操作',
						align: 'center',
						key: 'createTime',
						render: (h, params) => {
							return h(
								'div', {
									style: {
										cursor: 'pointer',
										color: '#2db7f5'
									},
									on: {
										click: () => {
											this.modal1 = true;
											this.byId = params.row.id;
											this.getQueryById(this.byId);
										}
									}
								},
								'查看详情'
							)
						}
					}
				],
				columns1: [
					//				{
					//					title: '用户名',
					//					align: 'center',
					//					key: 'userName',
					//					// render: (h, params) => {
					//					// 	return h('div', params.row.platformCoinPrice == null ? '#' : this.Fixed(params.row.platformCoinPrice, 4))
					//					// }
					//				}, {
					//					title: '账户类型',
					//					align: 'center',
					//					key: 'accountTypeId',
					//					// render: (h, params) => {
					//					// 	return h('div', params.row.earningsNum == null ? '#' : this.Fixed(params.row.earningsNum, 4))
					//					// }
					//				}, {
					//					title: 'uuid',
					//					align: 'center',
					//					key: 'createTime',
					//					// sortable: true,
					//					// render: (h, params) => {
					//					// 	return h('div', params.row.createTime == null ? '#' : this.stringToTime(params.row.createTime))
					//					// }
					//					
					//				},
					{
						title: '数量',
						align: 'center',
						key: 'num',
						// render: (h, params) => {
						// 	return h('div', params.row.storageWorth == null ? '#' : this.Fixed(params.row.storageWorth, 4))
						// }
					},
					{
						title: '释放比例',
						align: 'center',
						key: 'releaseRatio',
						// render: (h, params) => {
						// 	return h('div', params.row.storageWorth == null ? '#' : this.Fixed(params.row.storageWorth, 4))
						// }
					},
					{
						title: '释放数量',
						align: 'center',
						key: 'releaseNum',
						// render: (h, params) => {
						// 	return h('div', params.row.storageWorth == null ? '#' : this.Fixed(params.row.storageWorth, 4))
						// }
					},

					{
						title: '创建时间',
						align: 'center',
						key: 'createTime',
						sortable: true,
						render: (h, params) => {
							return h('div', params.row.createTime == null ? '#' : this.stringToTime(params.row.createTime))
						}
					},
				],
			}
		},
		created() {

		},
		mounted() {
			this.$Message.config({
				top: 250
			})
			this.getQuery() // 查询直推奖励
		},
		methods: {
			// exportData() {
			// 	this.jsonData = [];
			// 	this.dcShow = true;
			// 	this.axios.post('/admin/statistical/exchange_coin', this.qs.stringify({
			// 		current: 1, // 当前页【可选，默认1】
			// 		size: this.pageSize, // 每页记录数【可选，默认20】
			// 		uuid: this.uuid,
			// 		userName: this.userName,
			// 		fromCoinId: 1,
			// 		startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
			// 		endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
			// 	})).then(res => {
			// 		if(res.data.code == 200) {
			// 			this.axios.post('/admin/statistical/exchange_coin', this.qs.stringify({
			// 				current: this.page, // 当前页【可选，默认1】
			// 				size: res.data.data.total, // 每页记录数【可选，默认20】
			// 				uuid: this.uuid,
			// 				userName: this.userName,
			// 				fromCoinId: 1,
			// 				startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
			// 				endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
			// 			})).then(res => {
			// 				if(res.data.code == 200) {
			// 					this.downList = res.data.data.records;
			// 					this.downList.forEach((row, index) => {
			// 						this.jsonData.push({
			// 							uuid: this.downList[index].uuid,
			// 							userName: this.downList[index].userName,
			// 							fromCoinNum: this.Fixed(this.downList[index].fromCoinNum, 4),
			// 							fromCoinPrice: this.Fixed(this.downList[index].fromCoinPrice, 4),
			// 							toCoinPrice: this.Fixed(this.downList[index].toCoinPrice, 4),
			// 							toCoinNum: this.Fixed(this.downList[index].toCoinNum, 4),
			// 							exchangeRatio: this.downList[index].exchangeRatio,
			// 							createTime: this.stringToTime(this.downList[index].createTime),
			// 						})
			// 					})
			// 					let str = `UUID,用户名,EMP数量,EMP价格,USDT价格,USDT数量,倍数,时间\n`;
			// 					this.downLoad(this.jsonData, str, 'EMP兑换USDT明细');
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			// 处理时间段时间格式
			getTime(daterange) {
				this.dataValue = daterange
			},
			getTime2(daterange) {
				this.dataValue2 = daterange
			},
			getQuery(page) {
				this.loading = true;
				isNaN(page) ? this.page = 1 : this.page = page;
				this.axios.post('/admin/statistical/release/list', this.qs.stringify({
					current: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					uuid: this.uuid,
					userName: this.userName,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
				})).then(res => {
					if(res.data.code == 200) {
						// console.log(res);
						this.list = res.data.data.records;
						this.info = res.data.data.total;
						this.loading = false;
					}
				})
			},
			getQueryById(id) {
				this.loading2 = true;
				// isNaN(page) ? this.page2 = 1 : this.page2 = page;
				this.axios.get(`/admin/statistical/release/list/detail/${id}`).then(res => {
					if(res.data.code == 200) {
						// console.log(res);
						// console.log(res.data.data);
						this.list1 = res.data.data;
						this.info2 = res.data.data.total;
						this.loading2 = false;
					}
				})
			}
		}
	}
</script>
<style scoped>
	/* .clear {
        margin-bottom: 20px;
    } */
</style>